﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>街道样式</title>
    <!--该库集成了leaflet与MapGIS IGServer for JavaScript脚本库-->
    <script include="vectortile" src="./static/libs/include-leaflet-local.js"></script>
    <style>
        body {
            height: 700px;
        }
    </style>
    <script type="text/javascript">
        //使用严格模式
        "use strict";
        //定义地图文档图层和地图、专题图图层
        var map;

        /** 初始化地图显示*/
        function init() {
            //地图容器
            map = L.map('leaf_map', {
                //地图渲染在canvas上
                preferCanvas: true,
                //不添加属性说明控件
                attributionControl: false,
                //添加缩放控件
                zoomControl: true,
                //投影坐标系
                crs: L.CRS.EPSG3857,
                //最大级数
                maxZoom: 15,
                //最小级数
                minZoom: 0
            }).setView([(29.0125822276524 + 33.2932017737021) / 2, (108.34341 + 116.150939561213) /
                2
            ], 1);
            var { protocol, ip, port } = window.webclient;
            var token = 'pk.eyJ1IjoicGFybmRlZWRsaXQiLCJhIjoiY2o1MjBtYTRuMDhpaTMzbXhpdjd3YzhjdCJ9.sCoubaHF9-nhGTA-sgz0sA'
            var gl = L.mapboxGL({
                accessToken: token,
                style: `${protocol}://${ip}:${port}/igs/rest/mrms/vtiles/styles/街道-墨卡托.json`
            }).addTo(map);
        }
    </script>
</head>

<body onload="init();">
    <div id="leaf_map" style="width: 100%; height:100%;">
    </div>
</body>

</html>